import React, { useState, useEffect } from 'react';
import styles from '../../style/headerTitle/headerTitle.module.less'
export default function Header(props) {
    const [currentDateTime, setCurrentDateTime] = useState(new Date());
    const hours = currentDateTime.getHours();
    const minutes = currentDateTime.getMinutes();
    const seconds = currentDateTime.getSeconds();
    const [chineseWeek, setChineseWeek] = useState('');
    const [weather, setWeather] = useState(localStorage.getItem('weather'));
    const formattedDate = `${currentDateTime.getFullYear()}-${currentDateTime.getMonth() + 1}-${currentDateTime.getDate()}`;
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentDateTime(new Date());
        }, 1000); // 每秒更新一次
        const getChineseWeek = () => {
            const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const day = currentDateTime.getDay(); // 获取星期几 (0-6, 0 表示星期日)
            setChineseWeek(daysOfWeek[day]);
        };
        getChineseWeek();
        return () => {
            clearInterval(interval);
        };
    }, []);
    // 返回上一页
    const return_ = () => {
        window.history.back();
    }
    return (
        <div className={styles.headerTop}>
            <div className={styles.return_} onClick={() => return_()}></div>
            <span>{localStorage.getItem('xianName') + props.title}</span>
            <ul>
                <li>{hours}:{minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}</li>
                <li>{formattedDate}</li>
                <li>{chineseWeek}</li>
                <li>
                    {/* <img src={require("../../assets/images/topHearder/weather.png")} alt="" /> */}
                    <span>{JSON.parse(weather).day}</span>
                    <img src={require("../../assets/images/topHearder/thermometer.png")} alt="" />
                    <span>{JSON.parse(weather).min}°-{JSON.parse(weather).max}°C</span>
                </li>
            </ul>
        </div>
    )
}
